<template>
	<ElConfigProvider :locale="zhCn">
		<div id="refApp" :style="style">
			<!--内容区-->
			<router-view v-slot="{ Component }">
				<transition name="fade" mode="out-in" appear>
					<component :is="Component" />
				</transition>
			</router-view>
		</div>
	</ElConfigProvider>
</template>

<script setup name="App">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useWindowSize } from '@vueuse/core'

// 监听屏幕宽高逻辑,大屏页面响应式
const { width, height } = useWindowSize(),
	BasicsWidth = 1920,
	BasicsHeight = 937
const style = computed(() => {
	const scale = width.value / height.value < BasicsWidth / BasicsHeight ? width.value / BasicsWidth : height.value / BasicsHeight
	return {
		transformOrigin: '0 0',
		top: '50%',
		left: '50%',
		width: `${width.value / scale}px`,
		height: `${height.value / scale}px`,
		transform: `scaleX( ${scale}) scaleY(${scale}) translateX(-50%) translateY(-50%)`
	}
})
</script>

<style lang="scss" scoped>
#refApp {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
</style>
